window.onload = function() {
    var oBoxs = $('.box'), // 这些变量必须设置为全局的
        oMain = $('#main')[0], // 装载所有图片的div
        oBoxWidth = oBoxs[0].offsetWidth, // 每个图片box宽度
        columnNum = Math.floor(document.body.clientWidth / oBoxWidth); // 图片列数
        oMain.style.width = oBoxWidth*columnNum+'px'; // 让图片居中

    waterfall(oBoxs,oBoxWidth,columnNum);
    window.onresize = function() {
        columnNum = Math.floor(document.body.clientWidth / oBoxWidth);
        waterfall(oBoxs,oBoxWidth,columnNum);
        oMain.style.width = oBoxWidth*columnNum+'px';
    }

    window.onscroll = function() {
        var lastBox = oBoxs[oBoxs.length - 1];
        var lastBoxTop = lastBox.offsetTop; // 距离页面顶部的高度
        var lastBoxHeight = lastBox.offsetHeight; // 自身高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //注意解决兼容性
        var bodyHeight = document.documentElement.clientHeight; //可视区高度

        console.log('(scrollTop + bodyHeight)', (scrollTop + bodyHeight))
        console.log('lastBoxTop + lastBoxHeight / 2', (lastBoxTop + lastBoxHeight / 2))

        // 加载图片的条件
        if ((scrollTop + bodyHeight) > (lastBoxTop + lastBoxHeight / 2)) {
            loadImg(oMain, function() {
                oBoxs = $('.box'); // 加入新的box后需更新box
                // 很蓝瘦，不知道为什么columnHeightList不能利用之前算好的值，一旦使用后，offsetHeight获取不正确。目前的办法是每次从第一个元素开始排列
                waterfall(oBoxs,oBoxWidth,columnNum);
            });
        }
    }
}

// 选择器函数
function $(selector) {
    return document.querySelectorAll(selector);
}


/**
 * 瀑布流函数
 * @param  {[type]} oBoxs     图片box数组
 * @param  {[type]} oBoxWidth 图片box宽度
 * @param  {[type]} columnNum 图片列数
 */
function waterfall(oBoxs,oBoxWidth,columnNum) {
    var columnHeightList = [];
    var targetIndex = 0;
    for (i = 0; i < oBoxs.length; i++) {
        var box = oBoxs[i];
        if (i < columnNum) {
            columnHeightList.push(box.offsetHeight)
            box.style.cssText = 'position:relative;float:left;';
        } else {
            targetIndex = columnHeightList.indexOf(Math.min.apply(null, columnHeightList));

            // 注意加单位啊！！！
            box.style.cssText = 'position:absolute';
            box.style.left = targetIndex * oBoxWidth + 'px';
            box.style.top = columnHeightList[targetIndex] + 'px';

            console.log('offsetHeight',box.offsetHeight)
            // 将所在的列高度加上图片高度
            columnHeightList[targetIndex] += box.offsetHeight;
        }
    }
}


// 将图片包装成box后，加载到mainDiv中
function loadImg(mainDiv, cb) {
    var imgData = { data: [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' },{ 'src': '4.jpg' }, { 'src': '5.jpg' }, { 'src': '6.jpg' }] };
    var prefix = '../../source/image/';

    imgData.data.forEach(function(val, index) {
        var oPic = document.createElement('div');
        oPic.className = 'pic';
        var oBox = document.createElement('div');
        oBox.className = 'box';
        var img = document.createElement('img');
        img.src = prefix + val.src;

        oPic.appendChild(img);
        oBox.appendChild(oPic);
        mainDiv.appendChild(oBox);

        // 避免新加进来的图片叠加，虽然再滚下去又自动布局好了
        img.onload = function() {
            cb();
        }
    });
}